import Header from '../common/header'
import '../assets/css/register.css'
import { Register } from '../request/app'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'

function Home () {
  let [user, setUser] = useState({ phone: '', nickname: '', password: '' })
  const Navigate = useNavigate()
  //获取手机号
  function getPhone (e) {
    setUser({ ...user, phone: e.target.value })
  }
  //获取昵称
  function getNick (e) {
    setUser({ ...user, nickname: e.target.value })
  }
  //获取密码
  function getPass (e) {
    setUser({ ...user, password: e.target.value })
  }
  //点击注册
  function register () {
    if (!user.phone || !user.nickname || !user.password) {
      alert('请输入必要内容')
    } else {
      Register(user).then(res => {
        if (res.code == 200) {
          alert('注册成功')
          Navigate('/login')
        } else {
          alert('手机号已注册')
        }
      })
    }
  }
  return (
    <div className='mylogin'>
      <Header title={'注册'}></Header>
      {/*  */}
      <div className='center'>
        <div className='img'>
          <img src={require('../assets/img/LR/logo.png')} alt='' />
        </div>
        {/*  */}
        <div className='int'>
          <div className='sjh'>
            <input
              type='text'
              placeholder='手机号'
              onChange={e => getPhone(e)}
            />
          </div>
          <div className='sjh'>
            <input type='text' placeholder='昵称' onChange={e => getNick(e)} />
          </div>
          <div className='sjh'>
            <input type='text' placeholder='密码' onChange={e => getPass(e)} />
          </div>
        </div>
        {/*  */}
        <div className='btn'>
          <button onClick={() => register()}>注册</button>
        </div>
      </div>
    </div>
  )
}
export default Home
